<template>
    <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit"
        @cancel="show = false" unmountOnClose>
        <template #title>
            {{$t('components.create.60zemc8cafg0')}}
        </template>
        <div class="table-info">
            <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
                <a-form-item field="name" :label="$t('components.create.60zecmbl84c0')" :rules="[{ required: true, message: $t('components.create.60zecmbl8as0') }]">
                    <a-input v-model="form.data.name" :placeholder="$t('components.create.60zecmbl8as0')" />
                </a-form-item>
                <a-form-item field="pid" :label="$t('components.create.60ze88suru80')" :rules="[{ required: true, message: $t('components.create.60zen04t62g9') }]">
                    <a-tree-select :data="permission" :placeholder="$t('components.create.60ze88sus1g0')" :fieldNames="{
                        key: 'id',
                        title: 'name',
                        children: 'children'
                    }" :fallback-option="false" v-model="form.data.pid"></a-tree-select>
                </a-form-item>
                <a-form-item field="isMenu" :label="$t('components.create.60zehwan9ks0')">
                    <a-radio-group v-model="form.data.type">
                        <a-radio :value="0">{{$t('components.create.60ze88sutco0')}}</a-radio>
                        <a-radio :value="1">{{$t('components.create.60ze88suth40')}}</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item field="icon" hide-label :content-flex="false">
                    <div style="width: 100%;padding: 5px 0;display: flex;align-items: center;">
                        <div>{{$t('components.create.60ze88sutmw0')}}</div>
                        <span v-if="form.data.icon" style="margin-left: 10px;color: rgb(var(--arcoblue-6));">
                            <component :is="form.data.icon"></component>
                        </span>
                    </div>
                    <div class="iconList">
                        <div class="iconItem" @click="form.data.icon = (form.data.icon == item ? '' : item)"
                            :class="{ active: form.data.icon == item }" v-for="item in icons">
                            <component :is="item"></component>
                        </div>
                    </div>
                </a-form-item>
                <a-form-item field="url" :label="$t('components.create.60ze88sutr00')">
                    <a-input v-model="form.data.url" :placeholder="$t('components.create.60ze88sutuw0')" />
                </a-form-item>
                <a-form-item field="method" :label="$t('components.create.60ze88sutzk0')">
                    <a-select allow-clear v-model="form.data.method" :placeholder="$t('components.create.60ze88suu3k0')">
                        <a-option v-for="item in ['get', 'post', 'put', 'delete']" :value="item">{{ item
                            }}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="key" :label="$t('components.create.60ze88suu980')" :rules="[{ required: true, message: $t('components.create.60ze88suufs0') }]">
                    <a-input v-model="form.data.key" :placeholder="$t('components.create.60ze88suufs0')" />
                </a-form-item>
                <a-form-item field="status" :label="$t('components.create.60zemc8cc6s0')">
                    <a-switch :checked-value="0" :unchecked-value="1" v-model="form.data.status" />
                </a-form-item>
                <a-form-item field="radius" :label="$t('components.create.60ze88suun40')" v-model="form.data.sort" :rules="[{ required: true, type: 'number', min: 0 }]">
                    <a-input-number v-model="form.data.sort"></a-input-number>
                </a-form-item>
            </a-form>
        </div>
    </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apiAuthCreate } from '@/api/setting'
const show = defineModel('show', { default: false })
// const pid = defineModel('pid', { default: 0 })
const list = defineModel('list', { default: [] })
const formRef = ref()
const emit = defineEmits(['refresh'])
const form = reactive({
    data: {
        pid: '',
        name: '',
        type: 0,
        key: '',
        url: '',
        method: '',
        radius: 0,
        status: 0,
        sort: 0,
        icon: ''
    },

    loading: false,
})
const icons = ['icon-home', 'icon-cloud', 'icon-public', 'icon-archive', 'icon-calendar-clock',
    'icon-computer', 'icon-settings', 'icon-bar-chart', 'icon-common', 'icon-layers', 'icon-loading',
    'icon-language', 'icon-notification', 'icon-refresh', 'icon-sun', 'icon-moon', 'icon-storage',
    'icon-plus', 'icon-tool', 'icon-printer', 'icon-nav', 'icon-lock', 'icon-location', 'icon-empty',
    'icon-command', 'icon-computer', 'icon-bar-chart', 'icon-fullscreen-exit', 'icon-fullscreen',
    'icon-copy', 'icon-filter', 'icon-delete', 'icon-edit', 'icon-search', 'icon-more']
const submit = async () => {
    const validate= await formRef.value?.validate()
    if(validate) return;
    form.loading = true
    const { code } = await apiAuthCreate({
        ...form.data,
    })
    form.loading = false
    if (code != 200) return;
    emit('refresh')
    formRef.value?.resetFields()
    show.value = false
}
const filterAuths = (authList: any) => {
    const filteredAuth = authList?.map((auth: any) => {
        auth.menuIcon = auth.icon;
        delete auth.icon
        if (auth?.children?.length) {
            auth.children = filterAuths(auth.children);
        }
        return auth
    })
    return filteredAuth
}
const permission = computed(() => {
    return filterAuths(cloneDeep(list.value))
})
</script>

<style scoped>
.iconList {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /* height: 100px; */
    overflow: auto;

    .iconItem {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        cursor: pointer;

        &:hover {
            background-color: var(--main-hover-color);
        }

        &.active {
            border: 1px solid rgb(var(--arcoblue-6));
        }
    }
}
</style>